<!DOCTYPE html>

<!--
	This file is rendered by express.js, when the rurl /chat/123456 is visited in a browser.
	It includes jQuery, socket.io.js (it is automatically served by the socket.io library), 
	and a few more JavaScript files that you should check out.
-->

<html>

<head>

	<title>Private chat room | Tutorialzine Demo</title>

	<link type="text/css" rel="stylesheet" href="../css/stylesheet.css" />
	<link href="http://fonts.googleapis.com/css?family=Open+Sans Condensed:300italic,300,700" rel="stylesheet" type="text/css">


</head>

<body>

	<header class="banner">

		<h1 class="bannertext">
			<a href="http://tutorialzine.com/2014/03/nodejs-private-webchat/" id="logo">Tutorial<span>zine</span>: NODE.JS CHAT TUTORIAL</a>
		</h1>

	</header>


	<section class="section">

		<!-- These elements are displayed as white info cards in the middle of the screen -->

		<div class="connected">

			<img src="../img/unnamed.jpg" id="creatorImage" />

			<div class="infoConnected">
				<h2>Who are you?</h2>
				<br/>

				<form class="loginForm">
					<input type="text" id="yourName" placeholder="Your nick name" /><br/>
					<input type="text" id="yourEmail" placeholder="Your email address" /><br/>
					<input type="submit" id="yourEnter" value="ENTER" />
				</form>

			</div>

		</div>

		<div class="personinside">

			<img src="../img/unnamed.jpg" id="ownerImage" />

			<div class="infoInside">
				<h2>Chat with <span class="nickname-chat"></span></h2>
				<br/>

				<form class="loginForm">
					<input type="text" id="hisName" placeholder="Your nick name" /><br/>
					<input type="text" id="hisEmail" placeholder="Your email address" /><br/>
					<input type="submit" id="hisEnter" value="CHAT" />
				</form>

			</div>

		</div>

		<div class="invite-textfield">

			<h2>Oops, there are no other people in this chat!</h2>
			<h5>Invite a friend by sending them this URL</h5>

			<div class="link">
				<a title="Invite a friend" href="" id="link"></a>
			</div>

		</div>

		<div class="left">

			<img src="../img/unnamed.jpg" id="leftImage" />

			<div class="info">
				<h2><span class="nickname-left"></span> has left this chat.</h2>
				<h5>Invite somebody else by sending them this page.</h5>
			</div>

		</div>

		<div class="toomanypeople">

			<h2>Oops, you can not join this chat!</h2>
			<h5>There are already two people in it. Would you like to create a <a title="New Room" href="/create" id="room">new room</a>?</h5>

		</div>

		<div class="nomessages">

			<img src="../img/unnamed.jpg" id="noMessagesImage" />

			<div class="info">
				<h2>You are chatting with <span class="nickname-chat"></span>.</h2>
				<h5>Send them a message from the form below!</h5>
			</div>

		</div>

		<div class="chatscreen">

			<ul class="chats">
				<!-- The chat messages will go here -->
			</ul>

		</div>

	</section>

	<footer>

		<form id="chatform">

			<textarea id="message" placeholder="Write something.."></textarea>
			<input type="submit" id="submit" value="SEND"/>

		</form>

	</footer>

	<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="../js/moment.min.js"></script>
	<script src="/socket.io/socket.io.js"></script>
	<script src="../js/chat.js"></script>

</body>

</html>